<!-- 学术消息摘要 -->
<!-- 小鸽子 更新于 2020.8.20 -->
<template>
	<view class="all">
		<view class="academicNew" v-for="(item,index) in dataList" :key="item.id">
			<view class="academicTop">
				<view class="academicImage">
					<image :src="item.imgUrl" mode="aspectFill"></image>
				</view>
				<view class="academicContent">
					<text class="academicTitle">{{item.title}}</text>
					<navigator  hover-class="none" @tap="goSelfHomepage">{{item.name}}</navigator>
					<view class="academicText">
						<text>
							{{item.text}}
						</text>
					</view>
				</view>
			</view>
			<view class="academicBottom">
				<view class="academicLeft">
					{{getTimeing(item.passTimed)}}
				</view>
				<view class="academicRight">
					<text :class="item.isPraise? 'inxupt inxupttubiao5':'inxupt inxupttubiao4'" @tap="praise(index)">
						<text class="academicNum">
							{{item.praiseNum}}</text>
					</text>
					<text class="inxupt inxupttubiao6"><text class="academicNum">{{item.commentNum}}</text></text>
					<text :class="item.isCollect? 'inxupt inxupttubiao8':'inxupt inxupttubiao7'" @tap="collect(index)"><text class="academicNum">{{item.collectNum}}</text></text>
					<text :class="item.isReward? 'inxupt inxupttubiao10':'inxupt inxupttubiao9'" @tap="reward(index)"><text class="academicNum">{{item.rewardNum}}</text></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numList:{},
				dataList: 
				// [
					{
						id: 1,
						title: '西邮大一攻略',
						name: '辛学长',
						text: '公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告',
						imgUrl:'../static/logo.png',
						isPraise: false,
						praiseNum: 10,
						isCollect: false,
						collectNum: 16,
						isComment: false,
						commentNum: 13,
						isReward: false,
						rewardNum: 12,
						passTimed: "2020-08-20 18:43:00",
					}
				// 	,
				// 	{
				// 		id: 2,
				// 		title: '西邮学姐攻略',
				// 		name: '马学姐',
				// 		text: '马学姐带你吃遍西邮',
				// 		isPraise: false,
				// 		praiseNum: 100,
				// 		isCollect: false,
				// 		collectNum: 160,
				// 		isComment: false,
				// 		commentNum: 137,
				// 		isReward: false,
				// 		rewardNum: 123,
				// 		passTimed: "2020-06-20 18:23:00",
				// 	},
				// 	{
				// 		id: 3,
				// 		title: '西邮学姐攻略',
				// 		name: '马大学姐',
				// 		text: '马学姐带你吃遍西邮',
				// 		isPraise: false,
				// 		praiseNum: 1110,
				// 		isCollect: false,
				// 		collectNum: 1600,
				// 		isComment: false,
				// 		commentNum: 1314,
				// 		isReward: false,
				// 		rewardNum: 1005,
				// 		passTimed: "2019-08-20 18:46:00",
				// 	}
				// ]
				}
			},
		
		methods: {
			praise: function(index) {
				this.dataList[index].isPraise = !this.dataList[index].isPraise;
				if (this.dataList[index].isPraise) {
					this.dataList[index].praiseNum++;
				} else {
					this.dataList[index].praiseNum--;
				}
			},
			collect: function(index) {
				this.dataList[index].isCollect = !this.dataList[index].isCollect;
				if (this.dataList[index].isCollect) {
					this.dataList[index].collectNum++;
				} else {
					this.dataList[index].collectNum--
				}
			},
			reward: function(index) {
				this.dataList[index].isReward = !this.dataList[index].isReward;
				if (this.dataList[index].isReward) {
					this.dataList[index].rewardNum++;
				} else {
					this.dataList[index].rewardNum--
				}
			},
			getTimeing: function(timer) {
				var nowDate = new Date().getTime();
				var passDate = Date.parse(timer);

				var re = nowDate - passDate; //时间差毫秒数 

				var year = parseInt(re / (12 * 30 * 24 * 3600 * 1000));
				var re1 = re % (12 * 30 * 24 * 3600 * 1000);

				var mon = parseInt(re1 / (30 * 24 * 3600 * 1000))
				var result = re1 % (30 * 24 * 3600 * 1000)

				var days = parseInt(result / (24 * 3600 * 1000));

				var result1 = result % (24 * 3600 * 1000);

				var hours = parseInt(result1 / (3600 * 1000));

				var result2 = result1 % (3600 * 1000);
				var min = parseInt(result2 / (60 * 1000));

				var result3 = result2 % (60 * 1000);
				var sec = parseInt(result3 / 1000);

				var m = new Date(timer).getMonth() + 1;
				var d = new Date(timer).getDate();

				var y = new Date(timer).getFullYear();

				if (sec < 60 && min == 0 && hours == 0 && days == 0 && mon == 0 && year == 0) {
					return '0分钟前'
				} else if (min < 60 && hours == 0 && days == 0 && mon == 0 && year == 0) {
					return min + '分钟前'
				} else if (hours < 24 && days == 0 && mon == 0 && year == 0) {
					return hours + '小时前'
				} else if (days > 0 && year == 0) {
					return m + '-' + d
				} else if (year > 0) {
					return y + '-' + m + '-' + d
				}
			}
		}
	}
</script>

<style lang="less">
	.all {
		width: 750rpx;
		height: 1200rpx;
		background-color: #e6e6e6;

		.academicNew {
			width: 100%;
			height: 300rpx;
			background-color: #FFFFFF;

			.academicTop {
				width: 100%;
				height: 78%;
				// background-color: #007AFF;
				border-bottom: 1px solid #f2f2f2;
				display: flex;

				.academicImage {
					background-color: #4CD964;
					width: 32%;
					height: 90%;
					border-radius: 20rpx;
					position: relative;
					top: 10rpx;
					left: 10rpx;
					margin-right: 30rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}

				.academicContent {
					width: 59%;
					height: 93%;
					margin-top: 10rpx;

					.academicTitle {
						font-weight: 800;
						font-size: 32rpx;

					}

					navigator {
						margin-top: 8rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #548ec2;
					}

					.academicText {
						font-size: 32rpx;
						margin-top: 10rpx;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						width: 100%;
						height: 52%;
						color: #7f7f7f;
					}
				}
			}

			.academicBottom {
				width: 100%;
				height: 22%;
				font-size: 24rpx;
				color: #7f7f7f;
				display: flex;

				.academicLeft {
					width: 20%;
					text-align: center;
					line-height: 60rpx;
				}

				.academicRight {
					white-space: pre-wrap;
					width: 80%;
					line-height: 60rpx;
					text-align: right;
					padding-right: 12rpx;
					.inxupt {
						margin-left: 24rpx;
					}
					
					.academicNum {
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>
